<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax请求使用json格式数据</title>
    <script>
        function doSearch() {
            //1、创建异步对象
            var xmlHttp = new XMLHttpRequest();
            //2、绑定事件
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                    var data = xmlHttp.responseText;
                    //eval是执行括号中的代码，把json字符串转为json对象(了解即可，后面jquery方便)
                    var jsonobj = eval("(" + data + ")");
                    //更新dom对象
                    // alert(data)
                    callback(jsonobj);
                }
            }
            //3、初始异步对象的请求参数
            var proid = document.getElementById("proid").value;
            //true:异步处理请求。使用异步对象发起请求后不用等待数据处理完毕，即可执行其他操作
            xmlHttp.open("get", "queryProvinceServlet?proid=" + proid, true);

            //4、发送请求
            xmlHttp.send();
            //也可以创建其它的XMLHttpRequest，发送其他的请求处理
            // alert("在send之后的代码")
        }

        //定义一个函数，处理服务器端返回的数据
        function callback(jsonobj) {
            document.getElementById("proname").value = jsonobj.name;
            document.getElementById("projiancheng").value = jsonobj.jiancheng;
            document.getElementById("proshenghui").value = jsonobj.shenghui;
        }
    </script>
</head>
<body>
<p>ajax请求使用json格式数据</p>
<table>
    <tr>
        <td>省份编号：</td>
        <td>
            <input type="text" id="proid">
            <input type="button" value="搜索" onclick="doSearch()">
        </td>
    </tr>
    <tr>
        <td>省份名称：</td>
        <td><input type="text" id="proname"></td>
    </tr>
    <tr>
        <td>省份简称：</td>
        <td><input type="text" id="projiancheng"></td>
    </tr>
    <tr>
        <td>省份省会：</td>
        <td><input type="text" id="proshenghui"></td>
    </tr>
</table>
</body>
</html>
